<template>
  <div class="searchcontent">
        <div class="top">
          <router-link tag="span" to="/" class="iconfont back-icon">&#xe771;</router-link>
          <div class="search">
            <div class="header-city-botton">
                <span class="iconfont">&#xe627;</span>
                <input type="text" placeholder="输入城市名或拼音" v-model="keyword">
              </div>
          </div>
        </div>
        <div class="search-content" ref="wrapper1" v-show="keyword">
          <div>
            <ul>
              <li class="search-item border-bottom" 
              v-for="item in list" 
              :key="item.id" >
              {{item.spell}}</li>
              <li class="search-item border-bottom" v-show="!this.list.length">还没有搜索</li>
            </ul>
          </div>
        </div>
  </div>
</template>


<script>
import BScroll from 'better-scroll'
export default {
  name: 'SearchContent',
  props:{
    findList2:Object
  },
  data () {
    return {
          keyword:'',
          list:[],
          timer:null
    }
  },
  watch:{
    keyword(){
      if(this.timer){
        clearTimeout(this.timer)
      }
      if(!this.keyword){
        this.list=[]
        return
      }
      this.timer = setTimeout(()=>{
        const result=[]
        for(let i in this.findList2){
          // console.log(this.findList2[i]) //array
          this.findList2[i].forEach((value)=>{
            // console.log(value)     //object
            if(value.spell.indexOf(this.keyword) >=0 || value.name.indexOf(this.keyword) >=0){
              result.push(value)
            }
          })
        }
        this.list=result
        // console.log(this.list)
      },100)
    }
  },
  mounted(){
    // console.log(this.$refs.wrapper1);
    // this.scroll=new BScroll(this.$refs.wrapper1);
    this.scroll=new BScroll(this.$refs.wrapper1,{
      click:true,
      tap:true
    })
    // const options = {
    //   click:true,
    //   tap:true
    // }
    // this.scroll=new BScroll(this.$refs.wrapper1);
  },
}
</script>


<style lang="stylus" scoped>
.border-bottom
  &::before
    border-color #ccc
.searchcontent
    width 100%
    height 1.1rem
    .top 
      z-index 99
      height 1.1rem
    .back-icon
      width 5%
      float left
      z-index 999
      font-size .64rem
      padding-top .1rem
      position fixed
    .search
      height 1rem
      width 100%
      // line-height 1rem
      background-color #fff
      z-index 99
      margin-top -.1rem 
      padding-top .1rem
      position fixed
      .header-city-botton
        width 85%
        float right
        flex 1
        background-color  #ffffff
        color  #333
        height  .66rem
        border 1px solid #efefef
        line-height  .66rem
        margin-left .14rem
        margin-right .14rem
        margin-top .06rem
        border-radius .2rem
        padding-left  .2rem
        color  #666
        .header-city-botton .value
          padding-left 1.4rem
    .search-content
      z-index 9999
      height 60rem
      position absolute
      overflow hidden
      top 1rem
      right 0
      left 0
      bottom 0 
      background-color #fff
      .search-item
          line-height .7rem
          padding 0 .2rem 
</style>
